<template>
    <view class="content">
		<page-head :title="i18n.pages.total"></page-head>
		<image src="../../static/tabbar/return.png" mode="" class="page-return" @tap="back"></image>
		
		<view class="msg-list">
			<view class="li" v-for="(li, index) in list" :key="index">
				<view class="li-top">{{li.type}}</view>
				<view class="li-bottom">{{li.create_at}}</view>
				<view class="li-right">{{li.money}}</view>
			</view>
			
			<uni-load-more :loadingType="loadingType" :contentText="contentText" color="#929191"></uni-load-more>
		</view>
    </view>
</template>

<script>
	import service from '../../service.js';
	import pageHead from '../../components/page-head.vue';
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		computed: {
			i18n () {
				return this.$t('index');
			}
		},
		components: {
			uniLoadMore,
			pageHead
        },
		data() {
			return {
				loadingType: 0,
				contentText: uni.getStorageSync('content'),
				token: uni.getStorageSync('token'),
				lang: uni.getStorageSync('lang'),
				isHistoryLoading:false,
				scrollAnimation:false,
				title: '',
				list:[],
				pages:1,
				page:0,
				psize:4,
			};
		},
		onShow:function(){
			uni.setNavigationBarTitle({
				title: this.i18n.pages.integral
			})
			this.loadHistory();
		},
		onReachBottom() {
			this.loadHistory();
		},
		methods:{
			back(){
				uni.switchTab({
					url: '/pages/main/user'
				})
			},
			//触发滑动到顶部(加载历史信息记录)
			loadHistory(e){
				if(this.isHistoryLoading){
					return ;
				}
				if(this.page < this.pages){
					this.loadingType = 1;
					var keywords = this.keywords;
					this.isHistoryLoading = true;//参数作为进入请求标识，防止重复请求
					this.scrollAnimation = false;//关闭滑动动画
					//本地模拟请求历史记录效果
					var page = this.page+1;
					var psize = this.psize;
					service.auth(this, service.api.integral.total, {
						page: page,
						psize: psize,
					}, function(self, res) {
						if(res.info > 0){
							var list = res.data;
							for(let i=0;i<list.length;i++){
								//将数据逐条写入数组
								self.list.push(list[i]);
							}
							self.scrollAnimation = true;//恢复滚动动画
							self.isHistoryLoading = false;
							var pages = Math.ceil(res.info / psize);
							if(pages == 0){
								self.loadingType = 3;
							}else if(pages == 1 || pages == page){
								self.loadingType = 2;
							}else{
								self.loadingType = 0;
							}
							self.pages = pages;
							self.page = page;
						}else{
							self.loadingType = 2;
						}
					});
				}else{
					this.loadingType = 2;
				}
			}
		}
    }
</script>

<style lang="scss">
	.content{
		padding: 0;
		background: #F2F2F2;
	}
	.msg-list{
		margin: 0;
		width: 100%;
	}
	.li{
		background: #FFFFFF;
		padding: 30upx 30upx 40upx;
		border-bottom: 2upx solid #F2F2F2;
	}
	.li-top,.li-bottom{
		color: #333333;
		font-size: 30upx;
		line-height: 40upx;
	}
	.li-bottom{
		color: #929191;
		font-size: 26upx;
	}
	.li-right{
		color: #00B26A;
		font-size: 34upx;
		text-align: right;
		margin-top: -60upx;
	}
</style>